/**
 * 上传扩展类
 * wuyang QQ 51594
 *
 * */
layui.define(["jquery", "layer", 'upload'], function (exports) {
    var model_name = "myUpload",
        upload_elem = "input[lay-skin='myupload']",
        baseClassName = "layui-input-upload";


    var $ = layui.jquery, layer = layui.layer, upload = layui.upload;
    var obj = {
        options: {
            elem: upload_elem,
            url: 'UploadImages',
            size: 1000,
            accept: 'image',
            exts: 'jpeg|jpg|gif|png',
            name: '', value: '',
            width: 80,
            heigth: 60,
            view_path: '', view_style: 'width:120px;height:60px',
            btn_style: 0,
            btn_txt: '上传图片', btn_class: 'btn-upload layui-btn-sm'
        }
        , render: function (option) {
            var _this = this;
            _this.options = $.extend(_this.options, option);
            _this.style(_this.options.width, _this.options.height);

            //给对像加个套，扩展用，目前可不要
            $(_this.options.elem).addClass(baseClassName).wrap('<div class="layui-upload"></div>');
            // $(_this.options.elem).addClass(baseClassName).wrap('<div class="layui-upload"></div>');
            //循环对象
            $.each($(_this.options.elem), function () {
                //对配置内容进行取值，顺序为，html配置>js配置>默认配置，
                var url = $(this).attr('url') || _this.options.url;
                var view_path = $(this).attr('view_path') || _this.options.view_path;
                var view_style = $(this).attr('view_style') || _this.options.view_style;
                var width = $(this).attr('width') || _this.options.width || 80;//默认图片宽
                var height = $(this).attr('height') || _this.options.height || 60;//默认图片高
                var btn_txt = $(this).attr('btn_txt') || _this.options.btn_txt;
                var btn_class = $(this).attr('btn_class') || _this.options.btn_class;
                var btn_id = "imagebtn_" + new Date().getTime();//给BTN加个ID
                var size = $(this).attr('size') || _this.options.size;
                var accept = $(this).attr('accept') || _this.options.accept;
                var exts = $(this).attr('exts') || _this.options.exts;
                var btn_style = $(this).attr('btn_style') || _this.options.btn_style;
                //添加html
                if (btn_style == 1) {//up and down
                    $(this).after([
                        '<div style="position:relative;">',
                        '<img class="layui-upload-img" src="' + view_path + '" style="' + view_style + ';width:' + width + 'px;height:' + height + 'px;"/>',
                        '<i class="layui-icon layui-icon-close-fill" style="position:absolute;cursor:pointer;top:-7px;right:-12px;width:30px;height:30px;' + ((view_path == "" ? "visibility:hidden;" : "")) + '"></i>',
                        '<button type="button" id="' + btn_id + '" class="layui-btn ' + btn_class + '" style="width:' + width + 'px;margin-top:1px;">' + btn_txt + '</button>',
                        '</div>',
                    ].join(''));
                } else if (btn_style == 2) {//none
                    $(this).after([
                        '<div style="position:relative;width:' + width + 'px;height:' + height + 'px;">',
                        '<img class="layui-upload-img myupload-none-img" src="' + view_path + '" style="' + view_style + ';width:' + width + 'px;height:' + height + 'px;' + ((view_path == "" ? "display:none;" : "")) + '"/>',
                        '<i class="layui-icon layui-icon-close-fill" style="position:absolute;cursor:pointer;top:-8px;right:-22px;width:30px;height:30px;' + ((view_path == "" ? "display:none;" : "")) + '"></i>',
                        '<div  id="' + btn_id + '" class="myupload-none-add" style="line-height:' + (height - 2) + 'px;width:' + (width - 2) + 'px;height:' + (height - 2) + 'px;' + ((view_path != "" ? "display:none;" : "")) + '">+</div>',
                        '</div>',
                    ].join(''));
                } else {
                    $(this).after([
                        '<div style="position:relative;float:left">',
                        '<img class="layui-upload-img" src="' + view_path + '" style="' + view_style + ';width:' + width + 'px;height:' + height + 'px;"/>',
                        '<i class="layui-icon layui-icon-close-fill" style="position:absolute;cursor:pointer;top:-8px;right:-22px;width:30px;height:30px;' + ((view_path == "" ? "visibility:hidden;" : "")) + '"></i>',
                        '</div>',
                        '<div style="vertical-align:bottom;position:relative;float:left;margin:' + (height - 22) + 'px 5px 0px 5px;">',
                        ' <button type="button" id="' + btn_id + '" class="layui-btn ' + btn_class + '">' + btn_txt + '</button>',
                        '</div>',
                    ].join(''));
                }
                //调用layui上传组件上传
                var _obj = this;
                layui.upload.render({
                    elem: '#' + btn_id, url: url, size: size, accept: accept, exts: exts
                    , done: function (res, index, upload) {
                        if (res.code == 0) {
                            $(_obj).parent().find(".layui-upload-img").attr('src', res.object.view_path);
                            $(_obj).val(res.object.save_path);
                            $(_obj).parent().find(".layui-icon-close-fill").show();
                            $(_obj).parent().find(".myupload-none-add").hide();
                            $(_obj).parent().find(".myupload-none-img").show();
                            return layer.msg('上传成功');
                        } else {
                            return layer.msg('上传失败');
                        }
                    }
                });
                $(_obj).parent().find(".layui-icon-close-fill").click(function () {
                    $(this).hide();
                    $(_obj).parent().find(".layui-upload-img").attr('src', "");
                    $(_obj).parent().find(".myupload-none-add").show();
                    $(_obj).parent().find(".myupload-none-img").hide();
                    $(_obj).val("");
                });
            });
        }
        , style: function (width, height) {
            //默认样式
            var style = '<style>' +
                '.myupload-none-add{position:absolute;top:0px;left:0px;display:block;padding:0px; width:' + width + 'px; height:' + height + 'px; margin:0px; border-radius:2px; ' +
                'border:1px solid #cccccc; color:#cccccc;  line-height:' + height + 'px;text-align:center; font-size:30px;cursor:pointer}' +
                '.myupload-none-img{border-radius:2px}';
            '</style>';
            $('head').append(style);
        }
    };
    exports(model_name, obj);
});